<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选自习座位</title>
    <link rel="stylesheet" th:href="@{~/seats/css/index.css}">
    <!--<script th:src="@{~/seats/js/index.js}"></script>-->
    <script th:src="@{~/js/jquery.min.js}"></script>
    <script th:src="@{~/UI/lib/layui/layui.js}"></script>
</head>
<body>
<div >
    <form id="searchForm">
        <input th:value="${session.userEntity.uid}" type="hidden" name="uid.uid" id="uid">
        <div >
            请选择楼栋:<select id="bid" class="layui-input-inline">
            <option>请选择楼栋</option>
            <option th:each="bd:${allBuilding}" th:value="${bd.bid}" th:text="${bd.bname}"></option>
        </select>
            请选择自习室<select id="sid" name="sid.sid">
            <option>请选择自习室</option>
        </select>
            请选时间段:<select name="stime.time" id="time">
            <option>请选择预约时间段</option>
            <option th:each="at:${allTime}" th:value="${at.timeid}" th:text="${at.time}"></option>
        </select>
            <button id="button">预约</button>
        </div>
    </form>
</div>
<div class="show-case">
    <div class="show-case-item">
        <div class="seat" id="aa"></div>
        <i>可选座位</i>
    </div>
    <div class="show-case-item">
        <div class="seat selected1"   9></div>
        <i>选择座位</i>
    </div>
    <div class="show-case-item">
        <div class="seat occupied1"></div>
        <i>已选座位</i>
    </div>
</div>
<div class="container" id="con">
    <div class="row" id="row">
    </div>
</div>
<input id="a" type="hidden">
<!--<p class="text">你当前选中了<span id="seat-total-count">0</span>个座位,价格一共为$<span id="seat-total-price">0</span>。</p>-->
</body>
<script>
    function aaa(sid){
        $("#button").hide();
        console.info(sid)
        $.ajax({
            type:'post',
            url:'selectBySidStudyroomseat',
            data:{'sid':sid},
            dataType:'json',
            async: false,
            success:function (obj) {
                console.log(obj);
                var size = obj.length;
                if (size==0){
                    alert("当前自习室还在规划中,无座位展示");
                }
                var i=0;
                $(obj).each(function () {
                    i=i+1;
                    if (i==1){
                        var a=$('<div class="screen" id="heiban"><center><h2 style="color: #0A0E11">黑板</h2></center></div>'
                        )
                        $("#con").append(a);
                        var div=$(
                            '<div class="row" id="0">' +
                            '</div>'
                        )
                        $("#con").append(div);
                    }
                    if (i<9){
                        var div=$(
                            '<div class="seat" onclick="a('+i+')" id="b'+i+'" value="'+i+'"></div>\n'
                        )
                        $("#0").append(div);
                    }
                    if (i==9){
                        var div1=$(
                            '<div class="row" id="9">' +
                            '</div>'
                        )
                        $("#con").append(div1);
                    }
                    if (9<i<17){
                        var div2=$(
                            '<div class="seat" onclick="a('+i+')" id="b'+i+'" value="'+i+'"></div>\n'
                        )
                        $("#9").append(div2);
                    }
                    if (i==17){
                        var div3=$(
                            '<div class="row" id="17">' +
                            '</div>'
                        )
                        $("#con").append(div3);
                    }
                    if (17<i<25){
                        var div4=$(
                            '<div class="seat" onclick="a('+i+')" id="b'+i+'" value="'+i+'"></div>\n'
                        )
                        $("#17").append(div4);
                    }
                });
            }
        });
    }
    $(function () {
        $("#bid").change(function () {
            var bid=$("#bid").val();
            $.ajax({
                type:'post',
                data:{'bid':bid},
                dataType:'json',
                url:'selectByBidStudyRoom',
                async: false,
                success:function (obj) {
                    $("#sid").empty();
                    $(obj).each(function () {
                        var option=$(
                            ' <option  value="'+this.sid+'">'+this.sname+'</option>'
                        );
                        $("#sid").append(option);
                    })
                }
            })
        });
        $("#sid").blur(function () {
            $("#con").empty();
            sid=$("#sid").val();
            console.info("自习室"+sid);
            aaa(sid);
        });
        $("#time").change(function () {
            $("#con").empty();
            sid=$("#sid").val();
            aaa(sid);
            $(".seat.occupied").attr('class','seat');
            /* $(".seat.occupied").attr('onclick',"=+"a('+i+')"+");*/
            var time= $("#time").val();
            var sid=$("#sid").val();
            $.ajax({
                type:'post',
                url:'selectBySidAndStime',
                data:{'stime.timeid':time,
                    'sid.sid':sid},
                dataType:'json',
                async: false,
                success:function (obj) {
                    console.log(obj);
                    $(obj).each(function () {
                        var sid=this.ssid.ssid;
                        $("#b"+this.ssid.ssid).attr('class','seat occupied');
                        $("#b"+this.ssid.ssid).attr('onclick','');
                    })
                }
            })
        });
        $("#button").click(function () {
            var ssid= $("#a").val();
            var uid=$("#uid").val();
            var sid=$("#sid").val();
            var stime=$("#time").val();
            $.ajax({
                type:'post',
                data:{'uid.uid':uid,
                    'sid.sid':sid,
                    'ssid.ssid':ssid,
                    'stime.timeid':stime},
                url:'addUidOrder',
                dataType: "json",
                async:false,
                success:function (msg) {
                    if (msg == 1){
                        alert("预约成功");
                        $.ajax({
                            type:'post',
                            url:'RunTime',
                            data:{'stime.timeid':stime,
                                'uid.uid':uid,
                            }
                        });
                        // window.open('toAllOrder',"_self");
                    } else if (msg == 0) {
                        alert("预约失败");
                    } else if (msg == 2) {
                        alert("请核实时间后预约");
                    }
                },
                error:function(msg){
                    if (msg>0){
                        alert("成功");
                        $.ajax({
                            type:'post',
                            url:'RunTime',
                            data:{'stime.timeid':stime,
                                'uid.uid':uid,
                            },

                        });
                        window.open('toAllOrder',"_self");
                    } else{
                        alert("预约失败");
                    }
                }
            })
        });
    });
    function a(index) {
        var stime=$("#time").val();
        var flag= confirm('您确定要选择'+index+'号座位');
        if(flag==true){
            var uid=$("#uid").val();
            $.ajax({
                type:'post',
                data:{'uid.uid':uid,
                    'stime.timeid':stime
                },
                url:'selectByUidOrder',
                dataType:'json',
                success:function (msg) {
                    if (msg==1){
                        alert("您已经预约了该时间段");
                    }else{
                        $("#button").show();
                        $("#a").val(index);
                        $(".seat.selected").attr('class','seat');
                        $("#b"+index).attr('class','seat selected');
                    }
                }
            })
        }
    }
</script>
</html>